<template>
  <div>
        <el-table
          :data="capital"
          border
          style="width: 100%">
            <el-table-column
              label="关联号码"
              min-width="180">
            <template slot-scope="scope">
              <div>
                {{scope.row.relevanttel && scope.row.relevanttel.substr(0,3)+"****"+scope.row.relevanttel.substr(7)}}
              </div>
            </template>
            </el-table-column>
            <el-table-column
              prop="kfname"
              label="客服组"
              min-width="180">
            </el-table-column>
            <el-table-column
              prop="kfgroup"
              label="服务客服"
              min-width="180">
            </el-table-column>
            <el-table-column
            prop="id"
            label="受理单号"
            min-width="180">
            </el-table-column>
            <el-table-column
            label="问题类型"
            min-width="180">
            <template slot-scope="scope">
              <div>
                {{scope.row.yiji}}
              </div>
              <div>
                {{scope.row.erji}}
              </div>
            </template>
            </el-table-column>
            <el-table-column
            prop="thlx"
            label="通话类型"
            min-width="180">
            </el-table-column>
            <el-table-column
            prop="callcontent"
            label="来电内容"
            min-width="180">
              <template slot-scope="scope">
                <span :class="$style.click" @click="remarkDialog(scope.row.callcontent)">查看内容</span>
              </template>
            </el-table-column>
            <el-table-column
            prop="state"
            label="处理情况"
            min-width="180">
            </el-table-column>
            <el-table-column
            prop="ttpsj"
            label="时间"
            min-width="180">
            </el-table-column>
            <el-table-column
            prop="thsj"
            label="通话时长"
            min-width="180">
            </el-table-column>
            <el-table-column
            prop="fstate"
            label="排队状态"
            min-width="180">
            </el-table-column>
            <!-- <el-table-column
            prop="pdhs"
            label="排队耗时"
            min-width="180">
            </el-table-column> -->
            <el-table-column
            prop="xlsj"
            label="响铃时间"
            min-width="180">
              <template slot-scope="scope">
                {{scope.row.xlsj || 0}}s
              </template>
            </el-table-column>
            <el-table-column
            label="满意度"
            min-width="180">
              <template slot-scope="scope">
                <span>{{ scope.row.myd == 0 ? '未按键' : scope.row.myd == 1 ? '非常满意' : scope.row.myd == 2 ? '基本满意' : scope.row.myd == 3 ? '不满意' : '未进行满意度调查' }}</span>
              </template>
            </el-table-column>
            <el-table-column
            label="通话录音"
            min-width="180">
              <template slot-scope="scope">
               <a 
              :href="scope.row.deviceType===0?('http://wznb.wsloan.com:8888/telrecord/main/listentovoice?date=/media/sda/voice/'+ (scope.row.recordfile ? scope.row.recordfile.slice(0, 8) :'' )+ '/'+(scope.row.recordfile? scope.row.recordfile.replace('_9', '_') : '') +'.wav'): ('http://report.wsloan.com:8888/record/'+scope.row.recordfile)"
               target="_blank" 
              :class="$style.click">播放</a>
                <a :href="'http://122.228.132.78:1980/main/download?path=/media/sda/voice/'+(scope.row.recordfile? scope.row.recordfile.slice(0, 8) :'')  + '/'+(scope.row.recordfile? scope.row.recordfile.replace('_9', '_') : '')+'.wav'" :class="$style.click" v-if="scope.row.recordfile">下载</a>
            </template>
            </el-table-column>
            <el-table-column
            label="回访记录"
            min-width="180">
              <template slot-scope="scope">
                <span @click="listDialog(scope.row.id)" :class="$style.click">查看内容</span>
              </template>
            </el-table-column>
        </el-table>
        <div style="margin: 30px 0;">
          <el-pagination
          @current-change="handleCurrentChange"
          :page-size="pageSize"
          layout="prev, pager, next, jumper"
          :total="total">
          </el-pagination>
        </div>
        <el-dialog title="备注" :visible.sync="dialogTableVisible">
          {{remarkContent}}
        </el-dialog>
        <el-dialog :visible.sync="dialogListVisible">
          <el-table
            :data="list"
            style="width: 100%">
            <el-table-column
              prop="userName"
              label="用户名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="tel"
              label="手机号"
              width="180">
            </el-table-column>
            <el-table-column
              prop="hftime"
              label="回访计划时间">
            </el-table-column>
            <el-table-column
              prop="beizhu"
              label="备注">
            </el-table-column>
            <el-table-column
              prop="jieguo"
              label="回访结果">
            </el-table-column>
          </el-table>
        </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      id:this.$route.params.id,
      capital:[],
      total: 0,
      pageSize: 20,
      dialogTableVisible: false,
      dialogListVisible: false,
      remarkContent: '',
      list: []
    }
  },
  methods: {
    handleCurrentChange(val) {
       this.getTableDate(val)
    },
    remarkDialog (data) {
      this.dialogTableVisible = true;
      this.remarkContent = data;
    },
    listDialog (id) {
      this.dialogListVisible = true;
      this.getList(id);
    },
    getTableDate (page) {
      this.$get(this,{api:'ajaxapi/callinfolist2.do',data: {
        fUid:this.id,
        pagesize: this.pageSize,
        page
      }
      }).then(({data})=>{
        if (data.state === 0) {
          this.total = data.content.num;
          this.capital = data.content.data;
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    },
    getList (id) {
      this.$get(this,{api:'ajaxapi/loadHf.do',data: {
        danhaoid: id
      }
      }).then(({data})=>{
        if (data.state === 0) {
          this.list = data.content;
        } else {
          this.$toast({
            message: data.message
          })
        }
      })
    }
  },
  mounted () {
    this.getTableDate(1);
  }
}
</script>
<style lang="scss" module>
 .click {
   color: #5394fc;
   text-decoration: underline;
   cursor: pointer;
 }
</style>



